{extend name="base" /}
{block name="css"}
<link rel="stylesheet" href="https://paidou.cdn.dgyunju.cn/css/product_id.css?{$version|default=100}">
<link rel="stylesheet" href="https://paidou.cdn.dgyunju.cn/fonts/iconfont.css?{$version|default=100}">
{/block}
{block name="content"}
<div id="container">
    {if $vo}

    <div id="header"></div>
    <div id="rightside"></div>
    <div id="content">
        <div class="product-head">
            <div class="left-img">
                <a href="{$vo['img']}" target="_blank"> <img class="lagre-img" src="{$vo['img']}?imageView2/1/w/750" alt="{$vo['title']}"></a>
                <ul class="img-list">
                    {foreach $vo['banner'] as $b}
                    <li class="img-group">
                        <img class="img-li" data-src="{$b}" src="{$b}" alt="">
                    </li>
                    {/foreach}
                </ul>
            </div>
            <div class="right-word" >
                <div>
                    <div class="top">{$vo['title']}</div>
                    <div class="center">{:nl2br(trim($vo['sub_title']))}</div>
                </div>
                <div class="down hide_div">
                    <div class="tips">{:lang('Information')}</div>
                    <ul class="icon-list">
                        <li class="list" data-id="use_document">
                            <i class="icon fi fi-list" ></i>
                            <div class="list-tips">{:lang('use_document')}</div>
                        </li>
<!--                        <li class="list" data-id="protocol_documents">-->
<!--                            <i class="icon fi fi-manual" ></i>-->
<!--                            <div class="list-tips">{:lang('PDF_document')}</div>-->
<!--                        </li>-->
                        <li class="list" data-id="PDF_document">
                            <i class="icon fi fi-pdf" ></i>
                            <div class="list-tips">{:lang('protocol_documents')}</div>
                        </li>
                        <li class="list" data-id="video">
                            <i class="icon fi fi-video" ></i>
                            <div class="list-tips">{:lang('video')}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="product-center">
            <div class="center-head">
                <h2 class="tips">{:lang('Product parameters')}</h2>
            </div>
            <div class="center-img">
                {if $vo['context']}
                {$vo['context']|raw|htmlspecialchars_decode}
                {else}

                <div class="no-data">
                    <img class="no-img" src="https://paidou.cdn.dgyunju.cn/image/nodata.png" alt="">
                    <p>{:lang('no_data')}~</p>
                </div>
                {/if}
            </div>
        </div>
        <div class="product-down">
            {if  $vo['recommend'] }
            <div class="down-head">
                <h2 class="tips">{:lang('Related Products')}</h2>
            </div>
            <ul class="down-list">
                {foreach $vo['recommend'] as $v}
                <li class="list">
                    <a href="__DOMAIN__/product/{$v['id']}.html">
                        <img class="image" src="{$v['img']}" alt="">
                        <div class="list-top">{$v['title']}</div>
                        <div class="list-down">{$v['title']}</div>
                    </a>
                </li>
                {/foreach}
            </ul>
            {/if}
        </div>
        <div class="connect-down">
            <div class="down-head">
                <h2 class="tips">{:lang('contact_us')}</h2>
            </div>
            <div class="form-coup">
                <input class="input-coup name" type="text" placeholder="{:lang('name')}">
                <input class="input-coup phone" type="text" placeholder="{:lang('phone')}">
                <input class="input-coup email" type="text" placeholder="{:lang('email')}">
                <input class="input-coup company" type="text" placeholder="{:lang('company')}">
                <select class="select-coup">
                    <option>{:lang('application_area')}</option>
                    {foreach $application as $a}
                    <option value="{$a}">{$a}</option>
                    {/foreach}
                </select>
                <!--省份选择-->
                <div class="select-all">
                    <select class="select-one" id="prov" >
                        <option>={:lang('Please select a province')}=</option>
                    </select>
                    <!--城市选择-->
                    <select class="select-one"  id="city" >
                        <option>={:lang('Please select a city')}=</option>
                    </select>
                    <!--县区选择-->
                    <!-- <select class="select-one"  id="country" onchange="selecCountry(this)">
                            <option>=请选择县区=</option>
                    </select> -->
                </div>
            </div>
            <div class="text-area">
                <textarea class="talk-about" placeholder="{:lang('message')}" name="" id="" cols="30" rows="10"></textarea>
            </div>
            <button class="btn">{:lang('submit')}</button>
        </div>
        <div class="modal">
            <div class="modal-content">
                <div class="modal-head">
                    <div class="head-left">
                        {:lang('Information Center')}
                    </div>
                    <div class="head-right">
                        x
                    </div>
                </div>
                <div class="modal-center" id="model_content">
                    <div class="no-data"  style="display: none;" id="no-data">
                        <i class="fi fi-kongzhuangtai"></i>
                        <div>{:lang('no_data')}</div>
                    </div>
                    <div class="has-data"  id="has-data">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer"></div>
    {else}
    <div class="no-data">
        <img class="no-img" src="https://paidou.cdn.dgyunju.cn/image/nodata.png" alt="">
        <p>{:lang('no_data')}~</p>
    </div>
    {/if}

</div>


{/block}
{block name="script"}
<!--<script src="https://paidou.cdn.dgyunju.cn/js/product_id.js?V1111"></script>-->
<script>

    $(function() {
        const modal = $('.modal');
        const cancel=$('.modal .head-right')
        const imgLi=$('.img-list .img-group')
	    const showImg=$('.lagre-img')
        $('.icon-list .list').click(function() {
            console.log($(this));
            let type = $(this).attr('data-id');

            $.ajax({
                url:"__DOMAIN__/api/get_attr",
                data:{
                    type:type,
                    page:1,
                    info:'product',
                    id:{$vo['id']|default=0},
                },
                method:'post',
                success:function(e){
                    let list = e.data.list;
                    console.log(list);
                    $("#no-data").hide();
                    $("#has-data").empty();
                    if (list.length ==  0){
                        $("#no-data").show();
                    }else{
                        $("#has-data").show();
                        for (let i = 0; i < list.length; i++) {
                            let item =list[i];
                            $("#has-data").append(`  <a href="${item['file_path']}" target="_blank" style="color: black"> <div class="data-left">
                            ${item['title']}
                        </div>
                        <div class="data-right-btn">
                            {:lang('view')}
                        </div></a>`);

                        }
                    }
                    modal.show();


                },
                fail:function(){


                }
            })
        });
        cancel.click(function(){
            modal.hide()
        })
        imgLi.click(function(e){
		   e.preventDefault()
		   $that=$(this)
		   imgLi.removeClass('is-active')
		   $that.addClass('is-active')
		   showImg.attr('src',$that.children().data('src'))
	    })
        modal.on('click', function(e) {
            if ($(e.target).closest('.modal-content').length > 0) {
                console.log(1);
            } else {

                modal.hide();
            }
        });
        const prov = $('.select-all #prov');
        const city = $('.select-all #city');
        const country = $('.select-all #country');
        const name=$('.form-coup .name');
        const phone=$('.form-coup .phone');
        const email=$('.form-coup .email');
        const company=$('.form-coup .company');
        const selectCoup=$('.form-coup .select-coup');
        const textarea=$('.text-area .talk-about')
        /*用于保存当前所选的省市区*/
        let current = {
            prov: '',
            city: '',
            country: ''
        }

        let lang = "{$lang|default='zh-cn'}";
        if (lang !='zh-cn'){
            $("#city").hide();
        }
        $.ajax({
            url: '__DOMAIN__/api/area',
            type: 'get',
            data: {lang:'{$lang}'},
            dataType: 'json',
            success: function (res) {
                const list=res.data
                list.forEach((i,v)=>{
                    let provOpt = document.createElement('option');
                    provOpt.innerText = i.name;
                    provOpt.value = i.name
                    prov.append(provOpt);
                })
                prov.on("change", function () {
                    $('.select-all #city option').remove()
                    let textA=prov.val()
                    list.forEach(i=>{
                        if(i.name===textA){
                            i.children.forEach(i2=>{
                                let provOpt = document.createElement('option');
                                provOpt.innerText = i2.name;
                                provOpt.value = i2.name
                                city.append(provOpt)
                            })
                        }
                    })
                });
            },
        })
        $('.btn').on('click',function(){
            if(!name.val()){
                alert("{:lang('Please fill in your name first')}")
                return
            }
            name.val('')
            phone.val('')
            email.val('')
            company.val('')
            selectCoup.val('应用领域')
            prov.val('=请选择省份=')
            city.val('=请选择城市=')
            textarea.val('')
            return
            const payload={
                name:name.val(),
                tel:phone.val(),
                email:email.val(),
                company:company.val(),
                application:selectCoup.val(),
                area:`${prov.val()},${city.val()}`,
                details:textarea.val(),
                pid:{$vo['id']|default=''},
                lang:'{$lang}'
            }
            $.ajax({
                url: '__DOMAIN__/api/connect',
                type: 'post',
                data: payload,
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    if(res.message=='success'){
                        alert("{:lang('submit_success')}")
                    }
                },
            })
        })
    });
</script>
{/block}